<template>

  <!-- 右侧信息 -->
  <el-main class="information-container">

    <!-- 下拉菜单 -->
    <div class="menu-container">
      <button class="menu-show" @click="menuShow=!menuShow">
        {{grade}}班级
        <i class="el-icon-arrow-down" style="font-size: 1.2rem;"></i>
      </button>
      <div v-if="menuShow" class="menu-not-show"  @mouseenter="menuShow=true" @mouseleave="menuShow=false">
        <button :key="index" v-for="(item,index) in gradeList" @click="GradeName(index)" class="menu-each" :class="{menuEachShow:index == curIndex}">{{item}}班级</button>
      </div>
    </div>

    <!-- 折叠面板 -->
    <div v-if="checkbox">
      <checkboxGroup ref="boxShow" :nameData="item" :key="index" v-for="(item,index) in nameData"></checkboxGroup>
    </div>
    
  </el-main>

</template>

<script>
import { getPerson, LeadGrade } from "@/api/myInfoTeacher/honor"
import checkboxGroup from './checkboxGroup'

export default {
  components: {
    checkboxGroup
  },
  data() {
    return {
      grade: '',
      gradeList: [],
      curIndex: 99,
      menuShow: false,
      
      nameData: [],
      checkbox: true,
    }
  },

  mounted() {
    this.getLeadGrade()
  },

  methods: {

    GradeName(index){
      this.curIndex = index
      this.grade = this.gradeList[index]
      this.getPersonList(this.grade)
    },

    // 获取担任班主任的班级 
    async getLeadGrade() {
      const res = await LeadGrade()
      // console.log(res, 'LeadGrade')
      this.grade = []
      this.gradeList = []
      
      if ( res.data == undefined ) {
        this.$message.error("数据库错误请检查")
      } else if (res.data.length == 0) {
        this.$message("您不是任一班主任")
      } else {
        for (const key in res.data) {
          this.gradeList.push(
            res.data[key]
        )}
        this.grade = this.gradeList[this.gradeList.length-1]
        // console.log(this.grade, 'grade')
        // console.log(this.gradeList, 'gradeList')
        this.getPersonList()
      }
    },
    
    // 全部荣誉的人员名单
    async getPersonList(){
      const res = await getPerson(this.grade) 
      // console.log(res, 'getPersonList')
      if ( res.rows == undefined ) {
        this.$message.error("数据库错误请检查")
      } else if ( JSON.stringify(res.rows[0])==="{}" ) {
        this.$message("数据为空")
      } else {  
        this.getData(res.rows[0])
      }
    },
    
    // 处理candidateData和honorData数据
    getData(rows) {
      this.nameData = []
      // console.log(rows, 'rows')
      for (const key in rows) {
        // console.log(key, 'key')
        // console.log(rows[key], 'rows[key]')
        if ( key == 'honor1' ) {
          this.nameData.push({
            name: key,
            data: rows[key],
            module: '励志少年',
            gradeId: this.grade
          })
        } else if ( key == 'honor2' ) {
          this.nameData.push({
            name: key,
            data: rows[key],
            module: '模范学生',
            gradeId: this.grade
          })
        } else if ( key == 'honor3' ) {
          this.nameData.push({
            name: key,
            data: rows[key],
            module: '梦想领袖',
            gradeId: this.grade
          })
        } else if ( key == 'honor4' ) {
          this.nameData.push({
            name: key,
            data: rows[key],
            module: '励志少年',
            gradeId: this.grade
          })
        } else if ( key == 'honor5' ) {
          this.nameData.push({
            name: key,
            data: rows[key],
            module: '文明学生',
            gradeId: this.grade
          })
        }
      }
    },
  }
}

</script>


<style>

/* 信息内容 */
.information-container {
  padding: 0px;
  margin: 2.5rem 0px;
  border: 2px solid rgb(245, 245, 245, 0.8)
}

/* 下拉菜单 */
.menu-container {
  margin: 1.5rem;
}

/* 下拉菜单显示样式 */
.menu-show {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color:#888;
  border: 0;
  background: #fff;
  font-size: 1.2rem;
}

/* 下拉菜单内容 */
.menu-not-show {
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: 5px;
  z-index: 3;
  color:#888888;
  
  background: #f7f8fa;
}

.menu-each {
  border: 0;
  background:#fff;
  font-size: 1.2rem;
  padding: 0.5rem 0.75rem;
}

.menuEachShow {
  color: #fff;
  font-size: 1.2rem;
  background: #7c0000;
}

</style>